<template>
    <div v-clickoutside='hideUserInfo' :class='{"devops-user-info": true, "active": show}'>
        <div class='user-entry' @click.stop='toggleUserInfo'>
            {{username}}
            <i class="bk-icon icon-down-shape" />
        </div>
        <div class='user-info-dropmenu' v-if="show">
            <p class='user-avatar'>
                <!-- <i class='bk-icon icon-user-shape defaultPic' /> -->
                <img :src='avatarUrl' alt='用户头像' />
                <span>{{chineseName || username || "默认用户"}}</span>
            </p>
            <slot name='menu'>
                <ul>
                    <li v-for='(item, index) in menu' :key='index'>
                        <router-link v-if='item.to' class='user-menu-item' @click.native='hideUserInfo' :to='item.to'>{{item.label}}</router-link>
                        <a v-else-if='item.open' :href="item.open" target="_blank" class='user-menu-item' @click.stop='item.cb'>{{item.label}}</a>
                        <span v-else-if='item.cb' class='user-menu-item' @click.stop='item.cb'>{{item.label}}</span>
                    </li>
                </ul>
            </slot>
        </div>
    </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Component, Prop, Watch } from 'vue-property-decorator'
import { State, Action } from 'vuex-class'
import bkLogout from '../../utils/bklogout.js'
import { clickoutside } from '../../directives/index'

@Component({
    directives: {
        clickoutside
    }
})
export default class User extends Vue {
    @Prop()
    username: string
    @Prop()
    avatarUrl: string
    @Prop()
    chineseName: string
    @Prop()
    bkpaasUserId: string
    show: boolean = false

    @Action togglePopupShow

    toggleUserInfo(show: boolean): void {
        this.show = !this.show
    }

    hideUserInfo(): void {
        this.show = false
    }

    @Watch('show')
    handleShow(show, oldVal) {
        if (show !== oldVal) {
            this.togglePopupShow(show)
        }
    }

    get menu(): object[] {
        try {
            const { projectId } = this.$route.params
            return [
                {
                    to: '/console/',
                    label: '项目管理'
                },
                {
                    open: AUTHORITY_CENTER_URL,
                    label: '权限中心'
                },
                {
                    cb: this.logout,
                    label: '退出'
                }
            ]
        } catch (e) {
            console.warn(e)
            return []
        }
    }
    logout(): void {
        bkLogout.logout()
        window.location.href = LOGIN_SERVICE_URL + '/?c_url=' + window.location.href
    }
}
</script>

<style lang="scss">
@import '../../assets/scss/conf';

$dropmenuWidth: 212px;
.devops-user-info {
    position: relative;
    display: flex;
    align-items: center;
    color: $fontLigtherColor;
    height: 100%;
    cursor: pointer;

    .user-entry {
        display: flex;
        height: 100%;
        padding: 0 12px;
        align-items: center;
    }

    .bk-icon.icon-down-shape {
        vertical-align: -2px;
    }

    .user-info-dropmenu {
        // display: none;
        width: $dropmenuWidth;
        position: absolute;
        background: white;
        border: 1px solid $borderWeightColor;
        border-radius: 2px;
        box-shadow: 0 3px 6px rgba(51, 60, 72, 0.12);
        top: 53px;
        right: 0;
        cursor: default;
        &:after {
            position: absolute;
            content: '';
            width: 8px;
            height: 8px;
            border: 1px solid $borderWeightColor;
            border-bottom: 0;
            border-right: 0;
            transform: rotate(45deg);
            background: white;
            top: -5px;
            right: 36px;
        }
        .user-avatar {
            display: flex;
            align-items: center;
            padding-bottom: 15px;
            border-bottom: 1px solid $borderWeightColor;
            color: $fontWeightColor;
            padding: 20px;
            .defaultPic {
                background: #b1b1b1;
                padding: 10px;
                border-radius: 4px;
                color: white;
            }
            > img {
                width: 34px;
                height: 34px;
            }
            > span {
                padding-left: 15px;
            }
        }
        > ul {
            margin: 20px;
            > li {
                margin: 0 0 10px 0;
                line-height: 24px;
                &:last-child {
                    margin-bottom: 0;
                }
                .user-menu-item {
                    color: $fontWeightColor;
                    &:hover {
                        color: $aHoverColor;
                    }
                }
            }
        }
    }
}
</style>
